<template>
  <div>
    <div class="left scroll-box" style="padding: 30px">
      <el-form :model="inboundModel.getData()" label-position="top">
        <el-form-item :label="plugin.lang('inbound.supplier_id')"> 
          <el-select v-model="where.supplier_id" filterable remote clearable :remote-method="onSupplier" :loading="supplier.loading" style="width: 100%">
            <el-option
              v-for="item in supplier.list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="plugin.lang('inbound.code')" >
          <el-input v-model="where.code" clearable />
        </el-form-item>
        <el-form-item :label="plugin.lang('inbound.name')" >
          <el-input v-model="where.name" clearable />
        </el-form-item>
        <div class="tools">
          <el-button @click="inboundModel.page(1)" circle>
            <template #icon>
              <i class="iconfont min icon-search-max"></i>
            </template>
          </el-button>
        </div>
      </el-form>
    </div>
    <div class="right">
      <Table @info="data => info.open(data)" />
      <div class="page">
        <el-pagination
          @current-change="inboundModel.page"
          :current-page="where.page"
          :page-size="where.page_size"
          layout="total, prev, pager, next, jumper"
          :total="where.page_total"
          background>
        </el-pagination>
      </div>
      <Info ref="info" />
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import app from '@/app'
import inboundModel from '../../model/inbound'
import { get as getSupplier } from '@/api/erp/supplier'

import Table from './table'
import Info from './info'

export default {
  components: {
    Table,
    Info,
  },
  setup() {
    // 详情
    const info = ref(null)
    // 加载供货商
    const loading = ref(false)
    // 条件 
    const where = inboundModel.data

    // 选择供货商
    const supplier = reactive({
      list: [],
      loading: false
    })
    const onSupplier = (name) => {
      supplier.loading = true
      getSupplier({ name }).then(res => {
        supplier.list = res.data
      }).finally(() => supplier.loading = false)
    }

    onSupplier()

    return {
      lang: app.lang,
      plugin: app.plugin.index,
      inboundModel,
      info,
      loading,
      where,

      supplier,
      onSupplier
    }
  }
}
</script>